import gsap from 'gsap';
import { useGSAP } from '@gsap/react';
import React, { useRef } from "react";
import { ScrollTrigger } from "gsap/ScrollTrigger"
gsap.registerPlugin(useGSAP)
gsap.registerPlugin(ScrollTrigger)
type Props = {
    content?: string,
    textStyle?: React.CSSProperties,
    maskColor?: string,
    className?: string,
    showOptions?: {
        delay?: number
    }
}
export default function LeftToRightText(props: Props) {
    const { content = "请自定义内容", textStyle, maskColor, className, showOptions = {} } = props
    const { delay } = showOptions
    const container = useRef<HTMLDivElement | null>(null);
    useGSAP(() => {
        const tl = gsap.timeline();
        tl.fromTo(".mask",
            { scaleX: 0, transformOrigin: "left", },
            { scaleX: 1, duration: .5, ease: "power2.out", delay }
        );
        tl.to(".text", { opacity: 1, duration: 0, });
        tl.to(".mask", { scaleX: 0, transformOrigin: "right", duration: .7, ease: "power2.out" });
        ScrollTrigger.create({
            animation: tl,
            trigger: container.current,
            toggleActions: "restart none none none"
        })
    }, { scope: container });
    return (
        <div className={`inline-block relative${className ? " " + className : ""}`} ref={container}>
            <span className='text text-[#060e6d] opacity-0' style={textStyle}>{content}</span>
            <div className='mask w-full h-full bg-[#060e6d] absolute top-0 left-0' style={{ backgroundColor: maskColor }}></div>
        </div>
    )
}
